<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Slide</title>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../reset.css"/>
<style type="text/css">
body {padding: 20px;}
.slide { width: 600px;  position: relative; }
.slide .slideWraper {width: 600px; height: 180px;overflow: hidden;position: relative;margin: 0 auto;}
.slide .slideWrap {    width: 5000px;   position: absolute;  }
.slide .slideList{ width: 180px;margin: 0 10px;height: 180px;float: left;position: relative;}
.slide .point {display: block;position: absolute;z-index: 2;background: #eee;overflow: hidden;text-align: center;
font-size: 20px;line-height: 25px;color: #000;width: 25px;height: 25px;top: 80px;border: 1px solid #ddd;border-radius: 25px;}
.slide .pR {right: 0;}
.slide .slideList p {position: absolute;bottom: 0;left: 0;line-height: 30px;height: 30px;background:#023;background: rgba(0, 0, 0, .5);
width: 180px;color: #fff;z-index: 3;}
.slide .slideList img {height: 180px;width: 180px;}
a:hover {text-decoration: none;}
</style>
<body>

<div class="slide">
    <a class="point pL" href="#l">&lt;</a>
    <a class="point pR" href="#r">&gt;</a>

    <div class="slideWraper">
        <ul class="slideWrap">
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R4MI-18.jpg"/>

                <p>153R4MI-18.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41I4-16.jpg"/>

                <p>153R41I4-16.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R413D-27.jpg"/>

                <p>153R413D-27.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41532-30.jpg"/>

                <p>153R41532-30.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R46249-38.jpg"/>

                <p>153R46249-38.jpg</p>
            </li>


        </ul>
    </div>
</div>
<div class="slide asdf">
    <a class="point pL" href="#l">&lt;</a>
    <a class="point pR" href="#r">&gt;</a>

    <div class="slideWraper">
        <ul class="slideWrap">
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R4MI-18.jpg"/>

                <p>153R4MI-18.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41I4-16.jpg"/>

                <p>153R41I4-16.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R413D-27.jpg"/>

                <p>153R413D-27.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41532-30.jpg"/>

                <p>153R41532-30.jpg</p>
            </li>
            <li class="slideList">
                <img src="http://www.tx75.com/uploads/allimg/110612/153R46249-38.jpg"/>

                <p>153R46249-38.jpg</p>
            </li>


        </ul>
    </div>
</div>
<script type="text/javascript">
function logs() {
    var s = '';
    for (var i = 0,aLen = arguments.length; i < aLen; i++) {
        s += arguments[i] + ' ';
    }
    s = s.slice(0, -1);
    if (!window.console) alert(s);
    else
        console.log(s);
}
/**
 * $.Slide
 * @extends jquery.1.6.2
 * @fileOverview 横向幻灯片
 * @author 2kid
 * @email 444212235@qq.com
 * @site 2kid.org
 * @version 1.2
 * @date 2011-08-18
 * Copyright (c) 2011-2012 2kid
 * @example 例子
 *   $('ul').Slide();
 *
 */

(function($) {

    $.fn.Slide = function(options) {
        var opt = $.extend({}, $.fn.Slide.settings, options);
        return this.each(function() {
            var $this = $(this);
            var slide = new Slide(opt);
            slide.init($this);

        });
    }
    var Slide = function(options) {
        this.o = options;
        this.$slide = null;
        this.show = this.o.show;
        this.time = this.o.time;
        this.rounds = this.o.rounds;
        this.auto = this.o.auto;
        this.autoTime = this.o.autoTime;
        this.moveNums = this.moveNum = this.o.moveNum;
        this.easing = this.o.easing;
        this.start = this.o.start;
        this.complete = this.o.complete;
        this.lines=this.o.lines;
    }
    Slide.prototype = {
        init:function(obj) {
            var _this = this;
            this.$slide = obj;
            this.$slideWraper = this.$slide.find('div.slideWraper'),
                    this.$slideWrap = this.$slide.find('ul.slideWrap');
            var $slideList = this.$slide.find('li.slideList');

            this.slideListWidth = parseInt($slideList.eq(0).outerWidth(true), 10);
            this.listLen = $slideList.length;
            //根据几行计算宽度
            this.listLen=Math.ceil(this.listLen/this.lines);
            this.$slideWrap.width(this.listLen*this.slideListWidth);
            this.lNum = 0;
            this.rNum = this.listLen - this.show;
            this.timer = 0;
            //如果循环，就添加2个UL
           if (this.rounds) {
                this.$slideWrap.clone().css({
                    "left":this.listLen * this.slideListWidth
                }).appendTo(this.$slideWraper);
                this.$slideWrap.clone().css({
                    "left": -this.listLen * this.slideListWidth
                }).prependTo(this.$slideWraper);
                this.lNum = this.listLen;
                this.rNum = this.listLen - this.show + this.listLen;
            }
            //绑定事件L
            this.$pointL=this.$slide.find('a.pL').bind('click', function(event) {
                var t=_this.start(_this.$slide) || 0;
                setTimeout(function(){
                    _this.moveL();
                },t);
                 setTimeout(function(){
                     _this.complete(_this.$slide);
                 }, _this.time+t);
            });
            //绑定事件R
            this.$pointR=this.$slide.find('a.pR').bind('click', function(event) {
                var t=_this.start(_this.$slide) || 0;
                setTimeout(function(){
                    _this.moveR();
                },t);
                setTimeout(function(){
                     _this.complete(_this.$slide);
                 }, _this.time+t);
            });
            //自动运行
            if(this.auto){
              this.autoPlay();
              this.$slide.bind('mouseenter',function(){
                  clearInterval(_this.timer);
              });
              this.$slide.bind('mouseleave',function(){
                  _this.autoPlay();
              });
            }

        },
        autoPlay:function(){
            var _this=this;
            _this.timer=setInterval(function(){
                _this.$pointR.click();

            },_this.autoTime);

        },
        /**
         * @describe
         * 根据隐藏的数量是否等于零判断
         */
        isLimitL:function() {
            if (this.rounds) {
                if (this.lNum - this.moveNum <= 0) {
                    this.$slideWraper.children().eq(2).css({
                        "left": -(this.listLen + this.lNum) * this.slideListWidth
                    }).prependTo(this.$slideWraper);
                    this.lNum += this.listLen;
                    this.rNum -= this.listLen;
                }
            } else {
                //最后一项
                if (this.lNum <= 0){
                    this.$pointL.addClass('last');
                    return false;
                }else{
                    this.$pointL.removeClass('last');
                    this.$pointR.removeClass('last');
                }

                if (this.lNum - this.moveNum <= 0)
                    this.moveNums = this.lNum;
                else
                    this.moveNums = this.moveNum;
            }
            this.lNum -= this.moveNums;
            this.rNum += this.moveNums;
            return true;
        },
        isLimitR:function(){
            if(this.rounds){
                 if (this.rNum - this.moveNum <= 0) {
                        this.$slideWraper.children().eq(0).css({
                            "left": (this.show + this.rNum) * this.slideListWidth
                        }).appendTo(this.$slideWraper);
                        this.lNum -= this.listLen;
                        this.rNum += this.listLen;
                    }
            }else{
                //最后一项
                if (this.rNum <= 0){
                    this.$pointR.addClass('last');
                    return false;
                }else{
                    this.$pointL.removeClass('last');
                    this.$pointR.removeClass('last');
                }

                    if (this.rNum - this.moveNum <= 0)
                        this.moveNums = this.rNum;
                    else
                        this.moveNums = this.moveNum;
            }
            this.lNum += this.moveNums;
            this.rNum -= this.moveNums;
            return true;
        },
        moveL:function() {
             if (!this.$slideWraper.children().is(':animated')&&this.isLimitL() ) {
                this.$slideWraper.children().animate({
                    'left':'+=' + this.slideListWidth * this.moveNums
                }, this.time, this.easing);
            }


        },
        moveR:function() {
             if (!this.$slideWraper.children().is(':animated')&&this.isLimitR() ) {
                this.$slideWraper.children().animate({
                    'left':'-=' + this.slideListWidth * this.moveNums
                }, this.time, this.easing);
             }
        }

    }


    $.fn.Slide.settings = {
        show:2,
        time:300,
        rounds:false,
        auto:false,
        moveNum:1,
        autoTime:1000,
        easing:"swing",
        lines:1,
        start:function($slide) {
        },
        complete:function($slide) {
        }
    }
})(jQuery);
$('div.slide') .Slide({
    show:3,
    rounds:true,
    moveNum:2,
    auto:true,
    time:500,
    autoTime:2000,
    start:function($slide) {
        var $capt=$slide.find('p');
        if(!$capt.is(':animated'))
        $capt.animate({bottom:-30},250);
        return 250;
    },
    complete:function($slide) {
        var $capt=$slide.find('p');
        if(!$capt.is(':animated'))
        $capt.animate({bottom:0});
    }
});

</script>


</body>
</html>


